<template>
	<!-- 公告详情页 -->
	<div class="parent_d">
		<div class="R_quanyemian">


			<el-row style="width: 86.5%;margin-top: 45px;" type="flex" justify="space-between">
				<el-col :span="8">
					<div class="R_citouzi"><span class="zi">申报人主页 - 通知公告 - 最新公告 - 正文</span></div>
				</el-col>
				<el-col :span="4" style="text-align: right;padding-right: 10px;">
					<img src="/img/7-1-1.png">
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<div id="R_time">
						<div id="year">
							{{(Recommendation.createTime+'').substring(0,4)}}
						</div>
						<div id="md">
							{{(Recommendation.createTime+'').substring(5,7)}}
						</div>
						<div id="hm">
						  {{(Recommendation.createTime+'').substring(8,11)}}
						</div>
					</div>
				</el-col>

				<el-col :span="14" style=" padding: 0 40px;">
					<div class="center_p">
						<div class="R_h1">
							<h2>{{Recommendation.title}}</h2>
						</div>
						<div class="center_g">
							<mavon-editor
							    style="box-shadow: none;"
							     class="md"
							     :value="Recommendation.content"
							     :subfield = "false"
							     defaultOpen = "preview"
							     :toolbarsFlag = "false"
							     :editable="false"
							     :scrollStyle="true"
							  ></mavon-editor>

							
						</div>
						
						<div style="text-align: right;padding: 50px;">
							<span>发布人：{{Recommendation.createUser}}</span>
						</div>

					</div>

				</el-col>

				<el-col :span="4">
					<div class="right_c">
						<img src="/img/7-1-3.png">
						<span style="color: #3A6DE4;font-size: 17px; margin-left: 10px;">最新公告</span>
					</div>
					<div style="display: inline-block;vertical-align: top;">
						<img src="/img/7-1-5.png">
					</div>

					<div style="display: inline-block;vertical-align: top;width: 90%;">
						<div v-for="item in newNotice" class="time_c">
							<div style="margin-left: -5px;">
								<img src="/img/7-1-6.png" >
								<img src="/img/7-1-4.png">
							<span class="time_tag">{{(item.createTime+'').substring(5)}}</span>
							</div>
							
							<div class="desc">
								<span @click="queryDateil(item.id)" style="text-decoration: underline;cursor: pointer;color: #000FFF;" class="text_hidden">{{item.title}}</span>
							
							</div>


						</div>


					</div>


				</el-col>


			</el-row>




		</div>

	</div>

</template>

<script>
	export default {
		data(){
			return{
				Recommendation:{
					title:"",
					content:'',
					createTime:'',
					createUser:''
				},
				newNotice:[]  //最新公告列表
				
			}
		},
		mounted() {
			this.queryNewNoticeList();
			
		},
		methods:{
			//查看详情
			queryDateil(id){
				this.queryNoticeById(id)
			},
			
			//查询最新公告列表信息
			queryNewNoticeList(){
				let that=this
				that.$http.get("/announcement/query?isNew=true&pageSize=4").then(res=>{
					that.newNotice=res.data.list
					console.log(res.data)
				})
			},
				
			//查询公告详情
			queryNoticeById(id){
				let that=this;
				this.$http.get("/announcement/querybyId/"+id).then(res=>{
				    that.Recommendation=res.data
				})
				
			}
			
		},
		created() {
			let id=this.$route.query.id
			if(!id) this.$router.go(-1)
			this.queryNoticeById(id)
	}
	}
	
</script>

<style scoped>
	
	.md>>>.v-show-content{
		background-color: #fff !important;
	}
	.desc {

		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 子元素排列垂直排列 */
		-webkit-line-clamp: 1;
		/* 设置从第几行后开始省略 */
		width: 100%;
		overflow: hidden;
		padding: 5px 8px;

	}

	.time_c {
		padding: 20px 0;
	}

	.time_tag {
		display: inline-block;
		margin-left: -40px;
	}


	.right_c {
		padding: 15px;
		border-bottom: 1px solid #000aff73;
		margin-bottom: 10px;
	}

	.center_g {
		height: 600px;
		word-break: break-all;
		overflow-y: auto;
	}

	.parent_d {
		background: url(../../public/img/7-1-7-03.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 1055px;
	}


	.R_quanyemian {
		width: 100%;
		position: absolute;
		/* display: flex; */
	}


	.R_citou {
		width: 1630px;
		height: 30px;
		background-color: #BECDFF;
		float: left;
		/* z-index: -1; */
		/* display: flex; */
	}

	.R_citouR {
		width: 290px;
		height: 180px;
		background-color: #BECDFF;
		float: right;
		/* display: flex; */
		border-radius: 0px 0px 0px 25px;
	}

	.R_citouzi {
		text-align: right;
	}

	.R_h1 {
		text-align: center;
	}

	.R_tu {
		width: 220px;
		height: 120px;
		background-color: #fff;
		float: right;
		margin-top: -1.5%;
		margin-right: 1%;
		/* display: flex; */
		/* position: relative; */
	}

	.R_tu img {
		width: 220px;
		height: 120px;
	}

	#R_time {
		margin-left: 70%;
	}

	#year {
		font-size: 22px;
		padding-left: 30px;
		padding-top: 50px;
	}

	#md {
		font-size: 35px;
		padding-left: 30px;
		padding-top: 10px;
	}

	#hm {
		font-size: 24px;
		padding-left: 45px;
		padding-top: 10px;
	}
</style>
